import React, { useEffect, useState } from 'react'
import axios from 'axios'
import { Space, Button, Tag } from 'react-vant'
import { useNavigate } from 'react-router-dom'
interface TabItemType {
	title: string
	id: string
	list: ListItemType[]
}

export interface ListItemType {
	"title": string,
	"minPrice": string,
	"maxPrice": string,
	"jobLimit": string,
	"require": { name: string }[],
	"auther": string,
	"city": string,
	"id": string
}

const Index = () => {
	const [tab, setTab] = useState<TabItemType[]>([])
	const [tabIndex, setTabIndex] = useState(0)
	const navigate = useNavigate()
	const city = localStorage.getItem('city') || '上海'
	const fetchTabList = async () => {
		const resp = await axios.get('/api/tab');
		console.log(resp.data.data)
		setTab(resp.data.data)
	}

	useEffect(() => {
		fetchTabList()
	}, [])

	if (tab.length === 0) {
		return <div>数据加载中...</div>
	}

	return (
		<div>
			<div className="header">
				<Space>
					{
						tab.map((v, i) => {
							return <Button
								key={i}
								size={i === tabIndex ? 'normal' : 'small'}
								type={i === tabIndex ? "primary" : "default"}
								onClick={() => setTabIndex(i)}
							>{v.title}</Button>
						})
					}
					<Tag type="success" size="large" onClick={() => navigate('/city')}>{ city }</Tag>
				</Space>
			</div>
			<div>
				{
					tab[tabIndex].list.map(v => {
						return (
							<div key={v.id} className="list-item" onClick={() => {
								navigate('/detail/' + v.id, {
									state: v
								})
							}}>
								<div className='between'>
									<h3>{v.title}</h3>
									<span>{v.minPrice}-{v.maxPrice}K</span>
								</div>
								<div>
									<Space>
										{v.require.map((v, i) => {
											return <Tag key={i}>{v.name}</Tag>
										})}
									</Space>
								</div>
								<div className='between'>
									<h3>{v.auther}</h3>
									<span>{v.city}</span>
								</div>
							</div>
						)
					})
				}
			</div>
		</div>
	)
}

export default Index